<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>联系人管理页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="css/admin.css">
	<link rel="stylesheet" type="text/css" href="css/mood.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="<%=basePath%>/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/mian.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/bootstrap.min.js"></script>
  </head>
  <body id="bg" onload="show()">
		<div class="conta">
		<div class="leftsidebar_box">
			<div class="line">
				<div class="avtor">
					<a href="#"><span>Hi,<s:property value="#session.userInfo.userName"/></span></a>
				</div>
			</div>
	        <!--描述：左侧管理栏目导航-->
			<dl class="system_log">
				<a href="index.jsp"><dt id="person_info">个人信息设置<img src="${path }images/left/select_xl01.png"></img></dt></a>
			</dl>
			<dl class="custom">
				<a href="main.jsp"><dt id="jtitle">联系人管理<img src="${path }images/left/select_xl01.png"></img></dt></a>
			</dl>
			<dl class="channel">
				<dt>日程管理<img src="${path }images/left/select_xl01.png"></img></dt>
			</dl>
			<dl class="app">
				<a href="file_list"><dt>文件管理<img src="${path }images/left/select_xl01.png"></img></dt></a>
			</dl>
			<dl class="cloud">
				<dt>薪资管理<img src="${path }images/left/select_xl01.png"></img></dt>
			</dl>
			<dl class="source">
				<dt>资料管理<img src="${path }images/left/select_xl01.png"></img></dt>
			</dl>
			<dl class="statistics">
				<dt>统计分析<img src="${path }images/left/select_xl01.png"></img></dt>
			</dl>
		</div>
	<div class="rightsidebar_box">
		<div class="right_top">
			<h3>欢迎使用个人信息管理系统！<a href="javascript:0;" class="AdminBtn btn btn-sm btn-primary" style="float: right;" data-toggle='modal' data-target='#myLoginModal'>登录超级管理员</a></h3>
		</div>
		<hr>
		
		<!-- 超级管理员登录模态框,这里如果自己用弹出层怎么实现????拖拽模态框怎么实现??? -->
		<div class="modal fade" id="myLoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							超级管理员登录:
						</h4>
					</div>
					<div class="modal-body">
						<input type="text" class="form-control" placeholder="请输入用户名..." />
						<hr>
						<input type="password" class="form-control" placeholder="请输入管理员密码..." />
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary">
							立即登录
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
		<div class="right_section">
		  <div class="jtitle" id="tableList">

			<label for="blurSelect" class="col-sm-0 control-label" style="font-size: 20px;float:left;">
				<select id="blurSelect" style="border-radius: 5px;height: 34px;">
					<option value="forNameSelect">按照名字查询</option>
					<option value="forPhoneSelect">手机号码查询</option>
				</select>
			</label>
			<div class="col-sm-5">
				<input type="text" id="blurSelects" name="blurSelect" placeholder="请选择查询方式进行查询..." class="blurSelect form-control" onkeypress="blurSelectUser()" onblur="blurSelectUser()" />
			</div>
            <div class="col-sm-2">
                <input type="button" onclick="addFriend()" class="btn btn-sm btn-info form-control" value="添加联系人" />
            </div>
                     
            <div class="col-sm-2">
                <a type="button" id="delchecked" onclick="delchecked()" class="btn btn-sm btn-danger form-control">批量删除选定项</a>
            </div>
	   		<div class="col-sm-12">
	   			<br>
	   		</div>	          
			<!-- 联系人列表 -->
			<table class="table table-bordered table-hover" id="table">
				<thead>
					<tr>
					    <th><input type="checkbox" id="checkAll" /></th>
					    <th>序号：</th>
					    <th>联系人姓名：</th>
					    <th>联系人年龄：</th>
					    <th>联系人性别：</th>
					    <th>手机号码：</th>
					    <th>就职公司：</th>
					    <th>腾讯Q Q：</th>
					    <th>操作：</th>
					</tr>
				</thead>
				<tbody id="tbody"></tbody> <!-- 通过脚本显示表中内容 -->
			</table>
		  </div>
		  
		  	<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myModalLabel">
								详细信息:
							</h4>
						</div>
						<div class="modal-body">
							序号：<span id="b_num"></span>
							<hr>
							联系人姓名：<span id="b_name"></span>
							<hr>
							联系人年龄：<span id="b_age"></span>
							<hr>
							联系人性别：<span id="b_gender"></span>
							<hr>
							手机号码：<span id="b_phone"></span>
							<hr>
							就职公司：<span id="b_company"></span>
							<hr>
							腾讯qq：<span id="b_qq"></span>
							<hr>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary">
								提交更改
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			
		  <!-- 添加联系人 -->
		  <!-- 联系人列表 -->
		  <div class="dataList">
		  <h3>添加联系人：</h3>
			<form>
			  	<div class="form-group">
	                <label for="f_username">联系人姓名:</label>
	                <input type="text" class="form-control" id="f_username" name="f_username" placeholder="请输入姓名"/>
	            </div>
	            <div class="form-group">
	                <label for="f_age">联系人年龄:</label>
	                <input type="number" class="form-control" id="f_age" name="f_age" placeholder="请输入年龄"/>
	            </div>
	            <div class="form-group">
	                <label for="f_gender">联系人性别:</label>
	              		<select name="f_gender" id="f_gender" class="form-control">
							<option>男</option>
							<option>女</option>
						</select>
	            </div>
	            <div class="form-group">
	                <label for="f_phone">手机号码:</label>
	                <input type="number" class="form-control" id="f_phone" name="f_phone" placeholder="请输入手机号码"/>
	            </div>
	            <div class="form-group">
	                <label for="f_company">就职公司:</label>
	                <input type="text" class="form-control" id="f_company" name="f_company" placeholder="请输入就职公司"/>
	            </div>
	            <div class="form-group">
	                <label for="f_qq">腾讯QQ:</label>
	                <input type="number" class="form-control" id="f_qq" name="f_qq" placeholder="请输入QQ" />
	            </div>
	            <input type="hidden" name="f_id" id="f_id">
	            <div class="form-group">
	                <button type="submit" onclick="test()" class="btn btn-sm btn-success">提交</button>
	            </div>
		  	 </form>
		  </div>
		</div>
	</div>
	</div>
	
  </body>
</html>
